<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>基础：10、组件 使用组件</title>
	<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<!-- 有注册过vue实例的元素 -->
	<div id="app">
		<ul>
			<my-component v-for="item in arrs" v-bind:todo="item"></my-component>
		</ul>
	</div>

	<!-- 没有注册过vue的元素 -->
	<ul>
		<my-component v-for="item in arrs" v-bind:todo="item"></my-component>
	</ul>	

	<!-- 
		DOM模板解析说明：使用限制子元素标签类型的元素如<ul>，<ol>，<table>，<select>，在使用自定义元素出问题时，使用is属性来解决问题
	-->
	<table class="tab">
<!-- 		<my-row></my-row>
		<my-row></my-row>
		<my-row></my-row> -->
		<tr is="my-row"></tr>
	</table><br/>

	<div id="counter">
		<simple-counter></simple-counter>
		<simple-counter></simple-counter>
		<simple-counter></simple-counter>
	</div>

	<script type="text/javascript">
		// 1、组件的注册
		// (1)全局注册：可用于所有的vue实例
		Vue.component('my-component',{
			// 注册选项
			props: ['todo'],
			template: '<li>{{ todo.msg }}</li>'
		})
		// (2)局部注册：只能被局部注册所处的vue实例使用
		var child = {
			template: '<div>A custom component!</div>'
		}
		var vm = new Vue({
			components: {
				'my-component1': child
			}
		})

		// 2、注册的组件必须在vue实例元素内使用才生效
		new Vue({
			el: '#app',
			data: {
				arrs: [
					{ msg: 'msg1' },
					{ msg: 'msg2' },
					{ msg: 'msg3' },
					{ msg: 'msg4' },
					{ msg: 'msg5' },
				]
			}
		})

		// 3、DOM模板解析说明
		Vue.component('my-row',{
			template: '<tr><td>1</td><td>2</td><td>3</td></tr>'

			
		})
		new Vue({
			el: '.tab'
		})

		// 4、传入组件构造器的data属性必须是函数，否则会报错
		var data = { counter: 0 }
		Vue.component('simple-counter',{
			template: '<button v-on:click="counter += 1">{{ counter }}</button>',
			// 使用形式上必须是一个函数
			// 但是这里对多个同类组件实例返回引用的是同一个data对象
			// 会产生什么后果？
			// data数据的变化会影响到所有实例组件
			// 由于这三个组件共享了同一个 data ， 因此增加一个 counter 会影响所有组件！
			// 这不对。我们可以通过为每个组件返回全新的 data 对象来解决这个问题
			
			// 修改前
			// data: function(){
			// 	return data
			// }

			// 修改后
			data: function(){
				return {
					counter: 0
				}
			}
		})

		new Vue({
			el: '#counter'
		})

	</script>
</body>
</html>
<!-- 代码均通过测试，有什么纰漏欢迎联系 QQ:1123176978  Wechat:hyhlovehuanong -->